<template>
  <div>
    <el-container>
      <el-header class="homeHeader">
        <div class="title">
          <el-button type="text"
                     @click="() => goHome()">
            <svg
                    t="1626350918869"
                    class="icon"
                    viewBox="0 -200 1068 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2023"
                    width="30"
                    height="50"
            >
              <path
                      d="M360.044834 345.9616A51.487897 51.487897 0 1 0 411.990402 397.449497a51.487897 51.487897 0 0 0-51.716733-51.487897zM709.476031 345.9616a51.487897 51.487897 0 1 0 51.487898 51.487897A51.487897 51.487897 0 0 0 709.476031 345.9616zM536.019026 824.226958A238.446174 238.446174 0 0 1 297.572852 585.551949a34.325265 34.325265 0 0 1 68.65053 0 169.795644 169.795644 0 0 0 339.362452 0 34.325265 34.325265 0 0 1 68.65053 0A238.446174 238.446174 0 0 1 536.019026 824.226958z"
                      fill="#409EFF"
                      p-id="2024"
              ></path>
              <path
                      d="M34.412487 392.64396A33.409925 33.409925 0 0 1 20.453546 389.440268a34.5541 34.5541 0 0 1-17.391468-45.767019 582.614164 582.614164 0 0 1 1061.794863-2.059516 34.325265 34.325265 0 1 1-62.471982 28.375552 513.734799 513.734799 0 0 0-936.622063 2.059516 34.5541 34.5541 0 0 1-31.350409 20.595159z"
                      fill="#409EFF"
                      p-id="2025"
              ></path>
              <path
                      d="M784.991614 1024H282.927405a164.303602 164.303602 0 0 1-164.074766-164.074767V417.586986a34.325265 34.325265 0 1 1 68.65053 0v442.338247a95.424237 95.424237 0 0 0 95.424236 95.424237H784.991614a95.653072 95.653072 0 0 0 95.653072-95.424237V417.586986a34.325265 34.325265 0 1 1 68.65053 0v442.338247a164.303602 164.303602 0 0 1-164.303602 164.074767z"
                      fill="#409EFF"
                      p-id="2026"
              ></path>
            </svg>
          </el-button>
          <!-- 人事管理系统 -->


        </div>
        <div>
          <!-- <el-button
            icon="el-icon-bell"
            type="text"
            style="margin-right: 8px; color: #000000"
            size="normal"
            @click="goChat"
          ></el-button> -->
          <el-dropdown class="userInfo" @command="commandHandler">
            <span class="el-dropdown-link">
              欢迎，  {{ user.name }}<i><img :src="user.userface" alt="" /></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="el-dropdown">
              <el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
              <el-dropdown-item command="chat">进入聊天室</el-dropdown-item>
<!--              <el-dropdown-item command="setting">设置</el-dropdown-item>-->
              <el-dropdown-item command="logout" divided
                >注销登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" class="asideMenu">
          <el-menu router unique-opened>
            <el-submenu
              :index="index + ''"
              v-for="(item, index) in routes"
              v-if="!item.hidden"
              :key="index"
            >
              <template slot="title">
                <i
                  style="color: #409eff; margin-right: 5px"
                  :class="item.iconCls"
                ></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item
                :index="child.path"
                v-for="(child, indexj) in item.children"
                :key="indexj"
              >
                {{ child.name }}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            v-if="this.$router.currentRoute.path != '/home'"
          >
            <el-breadcrumb-item :to="{ path: '/home' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>{{
              this.$router.currentRoute.name
            }}</el-breadcrumb-item>
          </el-breadcrumb>
          <div
            class="homeWelcome"
            v-if="this.$router.currentRoute.path == '/home'"
          >
            <component :is="currentRole" />
            <!-- huanj -->
          </div>
          <router-view class="homeRouterView" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Dashboard from '@/views/dashboard'

export default {
  name: "Home",
  components: { Dashboard },
  data() {
    return {
      currentRole: 'Dashboard'
    }
  },
  computed: {
    routes() {
      return this.$store.state.routes;
    },
    user() {
      return this.$store.state.currentHr;
    },
  },
  methods: {
    goChat() {
      this.$router.push("/chat");
    },
    goHome() {
      this.$router.push("/home");
    },
    commandHandler(cmd) {
      if (cmd == "logout") {
        this.$confirm("此操作将注销登录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.getRequest("/logout");
            window.sessionStorage.removeItem("user");
            this.$store.commit("initRoutes", []);
            this.$router.replace("/");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
      } else if (cmd == "userinfo") {
        this.$router.push("/hrinfo");
      } else if (cmd == "chat") {
        this.$router.push("/chat");
      }
    },
  },
};
</script>

<style>
.homeRouterView {
  margin-top: 10px;
}

.homeWelcome {
  text-align: center;
  font-size: 30px;
  /* font-family: 华文行楷; */
  color: #409eff;
  /* padding-top: 50px; */
}

.asideMenu {
  min-height: 100%;
  background-color: #FFFFFF;
}

.homeHeader {
  /* background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); */
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 15px;
  box-sizing: border-box;
}

.homeHeader .title {
  font-size: 30px;
  /* font-family: 华文行楷; */
  color: #409EFF;
  /* background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); */
}

.homeHeader .userInfo {
  cursor: pointer;
}

.el-dropdown-link img {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  margin-left: 8px;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  font-family: 'jiangxi';
}
  .el-dropdown {
    font-family: 'jiangxi';
  }
</style>
